<template>
  <div class="park_profit">
    <div class="park-info">
      <el-form :model="parkInfo" label-width="130px">
        <el-form-item label="停车场名称:">{{ parkInfo.parkName }}</el-form-item>
        <el-form-item label="开户银行:">{{ parkInfo.bankName }}</el-form-item>
        <el-form-item label="停车券分润总金额:">{{ parkInfo.parkTicketTotalAmount }}</el-form-item>
        <el-form-item label="开户名称:">{{ parkInfo.accountName }}</el-form-item>
        <el-form-item label="总数量:">{{ parkInfo.parkTicketCount }}</el-form-item>
        <el-form-item label="银行账号:">{{ parkInfo.bankAccount }}</el-form-item>
      </el-form>
      <el-button class="recodeBtn" size="mini" @click="recodeShow = true">打款记录</el-button>
      <el-button class="comfirBtn" size="mini" type="primary" @click="paymentShow = true">确认打款</el-button>
    </div>

    <div class="order-box">
      <el-table :data="orderData" border>
        <el-table-column label="商户名称" prop="shopName" align="center"></el-table-column>
        <el-table-column label="用户名称" prop="nickname" align="center"></el-table-column>
        <el-table-column label="停车券名称" prop="ticketName" align="center"></el-table-column>
        <el-table-column label="时长(分钟)" prop="parkingDuration" align="center"></el-table-column>
        <el-table-column label="金额(元)" prop="sellPrice" align="center"></el-table-column>
        <el-table-column label="分润金额(元)" prop="divideAmount" align="center"></el-table-column>
        <!-- <el-table-column label="状态" prop="" align="center"></el-table-column> -->
      </el-table>
      <el-pagination
        :hide-on-single-page="false"
        :current-page="searchData.currentPage"
        :page-sizes="[10, 15, 20, 30]"
        :page-size="10"
        background
        style="margin-top:10px;"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        align="center"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>

    <el-dialog top="8px" :visible.sync="recodeShow" width="1000px" append-to-body :close-on-click-modal="false" :close-on-press-escape="false">
      <record v-if="recodeShow" :id = "id" @closeDialog="recodeShow = false" @refresh="getParkInfo"/>
    </el-dialog>

    <el-dialog top="8px" :visible.sync="paymentShow" width="600px" append-to-body :close-on-click-modal="false" :close-on-press-escape="false">
      <payment v-if="paymentShow" :data = "paymentData" @closeDialog="paymentShow = false" @refresh="getParkInfo"/>
    </el-dialog>

  </div>
</template>

<script>
  import record from './profitRecord.vue'
  import payment from './payment.vue'

  export default {
    props: ['id'],
    components: { record, payment },
    data() {
      return {
        parkInfo: {},
        searchData: {
          currentPage: 1,
          pageSize: 10
        },
        total: 0,
        recodeShow: false,
        orderData: [],
        paymentShow: false,
        paymentData: {},
        form: {
          currentPage: 1,
          pageSize: 10
        },
      }
    },

    mounted() {
      this.form.parkId = this.id;
      this.paymentData.id = this.id;
      this.getParkInfo();
      // this.getOrderData();
    },

    methods: {
      getParkInfo() {
        this.$axios({
          method: 'get',
          url: '/park/park-info/get-park-bank-info',
          params: {parkId: this.id}
        }).then((res) => {
          if(res.code == 200) {
            this.parkInfo = res.data;
            this.paymentData.bankName = res.data.bankName;
            this.paymentData.accountName = res.data.accountName;
            this.paymentData.bankAccount = res.data.bankAccount;
            this.getOrderData();
          }
        })
      },

      getOrderData() {
        this.$axios({
          method: 'get',
          url: '/system/cust-ticket/get-park-ticket-divide',
          params: this.form
        }).then((res) => {
          if(res.code == 200) {
            this.orderData = res.data.pageInfo.records;
            this.total = res.data.pageInfo.total;
            this.paymentData.ticketIdList = res.data.ticketIdList;
          }
        })
      },

      // 分页修改每页显示条数
      handleSizeChange(val) {
        this.form.pageSize = val;
        this.getOrderData();
      },
      // 分页跳转页面
      handleCurrentChange(val) {
        this.form.currentPage = val;
        this.getOrderData();
      },
    }
  }
</script>

<style scoped>
  .park-info {
    border: 1px solid #aaa;
    position: relative;
    padding: 12px;
    margin-bottom: 20px;
  }

  .el-form-item {
    width: 400px;
    display: inline-block;
    margin: 0;
  }

  .recodeBtn,
  .comfirBtn {
    position: absolute;
    right: 20px;
    top: 20px;
  }

  .comfirBtn {
    top: 90px;
  }




</style>
